<template>
	<view class="container">
		<u-navbar :isBack="true" title="我的钱包" title-color="#101010"></u-navbar>
		<view class="panel" style="padding: 32rpx;">
			<view class="purse-panel">
				<view class="purse-item">
					<view style="flex: 1;">
						<view style="margin-top: 16rpx;font-size: 24rpx;color:#F5F5F5;">我的余额(元)</view>
						<text style="font-size: 60rpx; margin: 16rpx 0rpx 16rpx 0;">{{balance}}</text>
					</view>
					<view class="purse-section">
						<view style="border: solid 1px #fff; padding: 16rpx 50rpx; background-color: #fff; color: #666;"
							@click="toWithdraw">
							<text style="font-size: 28rpx;padding-right: 4rpx;">提现</text>
						</view>
					</view>
				</view>
				<view class="purse-item">
					<view style="height: 1rpx; width: 100%; background-color: #F5F5F5; margin-top: 20rpx;"></view>
				</view>
				<view class="purse-item"
					style="justify-content: space-between; padding-left: 50rpx; padding-right: 30rpx;">
					<view class="purse-section" style="margin-top: 26rpx;" v-if="vuex_platformType != 1">
						<view style="color: #ddd;">今日收益</view>
						<view style="font-size: 36rpx; margin-top: 16rpx;">{{purseSection1}}</view>
					</view>
					<view class="purse-section-split-line" v-if="vuex_platformType != 1"></view>
					<view class="purse-section" style="margin-top: 26rpx;">
						<view style="color: #ddd;">累计充值(元)</view>
						<view style="font-size: 36rpx; margin-top: 16rpx;">{{purseSection2}}</view>
					</view>
					<view class="purse-section-split-line"></view>
					<view class="purse-section" style="margin-top: 26rpx;" @click="toWithdrawList">
						<view style="color: #ddd;">已提现(元)</view>
						<view style="font-size: 36rpx; margin-top: 16rpx;">{{purseSection3}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 90vh; margin-top: 20rpx; background: white;">
			<view class="flex-row-center" style="padding: 0rpx 32rpx; height: 100rpx; justify-content: space-between; border-bottom: 1px solid #F5F5F5;">
				<text style="font-size: 30rpx; font-weight: bold;">交易明细</text>
				<view>
					<picker style="height: 100%;" mode="date" :value="selectedDate" @change="onDateChange"
						fields="month">
						<view>{{ selectedDateText }} <u-icon name="arrow-down" size="32" style="margin-left: 10rpx;"
								color="#999"></u-icon></view>
					</picker>
				</view>
			</view>
			<view v-for="(item,index) in [1,2]" :key="index" class="flex-row-start"
				style="justify-content: space-between; border-bottom: 1px solid #F5F5F5; width: 686rpx; margin-left: 32rpx; padding: 30rpx 0rpx;">
				<view class="flex-row-start">
					<view class="flex-row-center"
						style="width: 96rpx; height: 96rpx; border-radius: 16rpx; background: #F5F5F5;">
						<image style="width: 40rpx; height: 40rpx;"></image>
					</view>
					<view class="flex-col-start" style="margin-left: 20rpx; align-items: flex-start; justify-content: flex-start;">
						<view style="font-weight: bold; font-size: 32rpx; color: #111111;">{{index == 0?'接单收益':'客户退单'}}
						</view>
						<view style="margin-top: 8rpx; font-weight: 500; font-size: 24rpx; color: #999999;">2023-11-02
							17:30</view>
					</view>
				</view>
				<view class="flex-col-start" style="align-items: flex-end; justify-content: center; font-size: 0rpx;">
					<view v-if="index == 0" style="color: #FC7404; font-size: 36rpx;font-weight: bold;">+2000</view>
					<view v-if="index == 1" style="color: #666666; font-size: 36rpx;font-weight: bold;">+2000</view>
					<image src="/static/icon/arrow-right-gray.png" style="width: 32rpx; height: 32rpx; margin-top: 30rpx;"></image>
				</view>

			</view>
			<!-- <purse-trade-item ref="listTrades" :selectedDate="selectedDate"></purse-trade-item> -->
		</view>
	</view>
</template>

<script>
	// import { userApi } from '../../common/user';
	export default {
		data() {
			return {
				// 钱包信息
				walletInfo: {},

				selectedDate: "",
				selectedDateText: "",

				purseSection1: "0.00",
				purseSection2: "0.00",
				purseSection3: "0.00",
				balance: 0,

				// 不要手动修改这个数组
				tradeList: [],
			}
		},
		onLoad() {
			let today = new Date();
			this.selectedDate = this.formatDateTime(today, "yyyy-MM");
			this.selectedDateText = this.formatDateTime(today, "yyyy年MM月");
			console.log(this.vuex_platformType);
			this.getWalletInfo();
		},
		methods: {
			getWalletInfo() {
				// let self = this;
				// userApi.getWalletInfo().then(res => {
				// 	console.log('获取数据：', res);
				// 	self.purseSection1 = res.purseSection1;
				// 	self.purseSection2 = res.purseSection2;
				// 	self.purseSection3 = res.purseSection3;
				// 	self.balance = res.balance;
				// });
			},
			toWithdraw() {
				uni.navigateTo({
					url: '/pages/users/Withdraw'
				});
			},
			toWithdrawList() {
				uni.navigateTo({
					url: '/pages/users/WithdrawList'
				});
			},
			onDateChange(e) {
				uni.$emit("refreshTrade", e.detail.value);
				// console.log("选择日期", e.detail.value);
				this.selectedDate = e.detail.value;
				let d = new Date(e.detail.value);
				this.selectedDateText = this.formatDateTime(d, "yyyy年MM月");
				this.$refs.listTrades.refreshTrades();
			},
			formatDateTime(date, format) {
				const o = {
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
					'H+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					S: date.getMilliseconds(), // 毫秒
					a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
					A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
				};
				if (/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp('(' + k + ')').test(format)) {
						format = format.replace(
							RegExp.$1,
							RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
						);
					}
				}
				return format;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #f5f5f5;
	}

	.panel {
		background-color: #FFF;
		
		// border-radius: 16rpx;
	}

	.purse-panel {
		background: linear-gradient(to right, #8CA2F5, #5263CE);
		border-radius: 24rpx;
		padding: 24rpx;
		height: 320rpx;
		// margin: 32rpx;
		color: #FFF;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
	}

	.purse-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.purse-section {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.purse-section-split-line {
		background-color: #C5C5C5;
		width: 1rpx;
		height: 42rpx;
	}

	.trade-list {
		display: flex;
		flex-direction: column;
	}

	.trade-icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #eee;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
	}

	.trade-list-item {
		margin-top: 25rpx;
		border-top: 0.1rpx solid #EEE;
		display: flex;
		flex-direction: row;
		// background-color: #CCC;
		padding: 20rpx 0;
	}

	.trade-list-item-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 100%;
		padding: 0 0rpx 0 20rpx;
	}

	.trade-list-item-spread {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
</style>